<template>
  <view>

    <!--    <uv-status-bar></uv-status-bar>-->
    <!--    <xl-header :showTitle="false"></xl-header>-->
    <image src="https://wz.mala.cn/static/img/xcxviewbanner.jpg" mode="widthFix" style="width: 100%"></image>
    <view class="threadContent">
      <uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
      <view v-if="pageCode==200">
        <view v-if="!loading">
          <view class="view bgwater">
            <uv-alert type="error" :show-icon="true" description="该留言正在审核中，当前仅你自己可见" v-if="wzinfo.status==1 && wzinfo.uid==userToken.getUser.id"></uv-alert>
            <view class="title">{{ wzinfo.title }}</view>
            <view class="tfter">
              <view style="display: flex">
                <uv-icon name="account"/>
                <view>{{ wzinfo.u_name }}</view>
              </view>
              <text>{{ wzinfo.create_time }}</text>

            </view>
            <image :src="`/static/icon/biaozhi${wzinfo.status}.png`" class="status" mode="widthFix"></image>
            <!--          <view class="type">-->
            <!--            <view>{{ wzinfo.type }}</view>-->
            <!--          </view>-->
            <view style="padding:10rpx 0;color:#093982;font-size:28rpx;">来源：四川群众呼声</view>
            <view class="desc" v-html="wzinfo.content"></view>
            <uv-album style="margin-top:10rpx;" :urls="wzinfo.image" singleMode="widthFix" keyName="temp" :rowCount="3"
                      multipleSize="110" v-if="wzinfo.image?.length>0"></uv-album>
            <!--转派-->
            <view class="zp" v-if="wzinfo.transfer_main && wzinfo.transfer?.length>0">
              <uv-steps :current="wzinfo.transfer?.length-1" direction="column">
                <uv-steps-item :title="getTransferText(item)"
                               :desc="uni.$uv.timeFormat(item.log.dateline,'yyyy-mm-dd hh:MM')"
                               v-for="(item,idx) in wzinfo.transfer" :key="idx"></uv-steps-item>
              </uv-steps>
            </view>
            <view v-if="wzinfo.evaluate_all>0" class="star">
              <view class="star_icon">
                <uv-rate active-color="red" inactive-color="#b2b2b2" gutter="20" readonly v-model="wzinfo.evaluate_all"
                         size="24"></uv-rate>
                <view class="star_num">{{ wzinfo.evaluate_all }}分</view>
              </view>
              <view class="uni-row sn"
                    style="justify-content: space-around;font-size:24rpx;padding-bottom:8px;color:#333">
                <view class="n">答复速度：
                  <uv-text :text="wzinfo.evaluate_speed" color="red"></uv-text>
                </view>
                <view class="n">解决程度：
                  <uv-text :text="wzinfo.evaluate_quality" color="red"></uv-text>
                </view>
                <view class="n">办理态度：
                  <uv-text :text="wzinfo.evaluate_satisfied" color="red"></uv-text>
                </view>
              </view>
              <view class="bmy_reason">理由：{{ wzinfo.bmy_reason }}</view>
            </view>


            <view class="info">
              <view>留言编号：{{ wzinfo.wid }}</view>
              <view style="display: flex;justify-content: space-between">
                <text>发布至{{ wzinfo.leader }}</text>
                <text>{{ wzinfo.type }}</text>
              </view>
            </view>
            <view v-if="wzinfo.address">{{ wzinfo.address }}</view>


            <xl-share type="view" :content="wzinfo"></xl-share>
          </view>
        </view>
      </view>
      <view v-else-if="404" style="min-height: 50vh;display: flex;justify-content: center;align-items: center;">
        <view>
          <uv-empty mode="page" :icon="emptyPng" width="128" height="128"></uv-empty>
          <view style="margin-top:80rpx;">
            <uv-button type="primary" :plain="true" text="返回首页" icon="home"
                       icon-color="#3c9cff" size="normal" @click="goHome"></uv-button>
          </view>
        </view>
      </view>
    </view>


    <!--受理-->
    <view class="shouli bgwater" v-if="wzinfo.passon_time && wzinfo.passon_id">
      <uv-cell icon="level" :title="wzinfo.passon_name" :iconStyle="[{'color':'#CC4339'}]"
               :titleStyle="[{'color':'#CC4339'},{'fontWeight':'bold'}]" :rightIconStyle="[{'color':'#666'}]">
      </uv-cell>

      <view class="desc p30">
        <view style="color:#093982;font-size:28rpx;line-height: 28rpx">来源：四川群众呼声</view>
        <view class="time">受理时间：{{ wzinfo.passon_time }}</view>
        您的留言已转交给相关机构进行处理，请您耐心等待回复。
      </view>

    </view>

    <!--reply-->
    <view class="shouli bgwater" v-if="replyInfo && replyInfo.length>0" v-for="(ritem,idx) in replyInfo">
      <uv-cell icon="level" :title="ritem.user_verify" :iconStyle="[{'color':'#CC4339'}]"
               :titleStyle="[{'color':'#CC4339'},{'fontWeight':'bold'}]" :rightIconStyle="[{'color':'#666'}]">
      </uv-cell>
      <view class="desc p30">
        <view style="color:#093982;font-size:28rpx;line-height: 28rpx">来源：四川群众呼声</view>
        <view class="time">回复时间：{{ ritem.reply_time }}</view>
        <uv-parse :content="ritem.l_reply"></uv-parse>
      </view>

    </view>
    <xl-copyright></xl-copyright>
  </view>
  <uv-safe-bottom></uv-safe-bottom>
</template>

<script setup>
import {
  ref,
  reactive
} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {getThreadView} from '../../common/thread.js'
import emptyPng from "@/static/icon/emptyData.png"
import {useToken} from "@/stores/userStores";
const userToken = useToken();

const pageCode = ref(200)
const test = ref('123123')
const skeleton = reactive([{
  type: 'line',
  num: 3,
  gap: '20rpx',
  style: ['width: 200rpx;marginBottom: 16rpx;height:60rpx', 'width: 100%;height:46rpx', 'width:100%;height:46rpx'],
}])
const loading = ref(true)
onLoad(options => {
  const wid = options["wid"]
  getThread(wid);
})
const wzinfo = ref({})
const replyInfo = ref({})
const getTransferText = (item) => {
  if (item.auto == 1) {
    return item['log']['to'] + '已自动接收'
  } else {
    if (item['log']['status'] == 2) {
      return item['log']['form'] + '已退回'
    } else if (item['log']['status'] == 1 && wzinfo.value.transfer_main['type'] == 2) {
      return item['log']['to'] + '已接收'
    } else if (item['log']['status'] == 1 && wzinfo.value.transfer_main['type'] == 1) {
      return item['log']['username'] + '已接收，转派至' + item['log']['to'] + '信箱'
    } else if (item['log']['status'] == 0) {
      return item['log']['form'] + '转派至' + item['log']['to']
    }
  }
}
const getThread = (wid) => {
  getThreadView({wid: wid}).then(r => {

    loading.value = false
    //严谨的前端判断
    if(r.data.threadData.status == 1){
      //如果审核中就判断是否自己
      if(r.data.threadData.uid != userToken.getUser.id){
        pageCode.value = 401
        return false;
      }
    }
    if(r.data.threadData.d_uid>0 || r.data.threadData.delete_time>0){
      pageCode.value = 401
      return false;
    }
    //去掉开头的\n
    r.data.threadData.content = r.data.threadData.content.replace(/^[\n\s]+/, '')
    r.data.threadData.content = r.data.threadData.content.replace(/\n/g, '<br>')
    r.data.threadData.type = r.data.threadData.type.replace(/[\r\n\s]+$/, '')
    wzinfo.value = r.data.threadData
    //替换r.data.replyInfo中的l_reply字段
    replyInfo.value = r.data.replyInfo.map(item => {
      return {
        ...item,
        l_reply: item.l_reply.replace(/\n/g, '<br>')
      }
    })
  }).catch(e => {
    loading.value = false
    httpCode(e.code)
  })
}
const httpCode = (code) => {
  if (code == 401) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  } else {
    pageCode.value = code
  }
}
const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>
<style>
.uv-steps-item__wrapper--column, .uv-steps-item__wrapper {
  background: #f9f9f9 !important;
}

</style>
<style scoped lang="scss">
.threadContent {
  background: #fff;
  padding: 20rpx 30rpx 30rpx 30rpx;
}

.p30 {
  padding: 30rpx;
}

.zp {
  border: 1px solid #eee;
  padding: 20rpx;
  margin: 20rpx 0;
  background: #f9f9f9
}

.p20 {
  padding: 20rpx;
}

.time {
  color: rgb(9, 57, 130);
  font-size: 28rpx;
}

.star {

  border: 1px solid #eee;
  padding: 20rpx;
  margin: 20rpx 0;
  background: #f9f9f9;

  .bmy_reason {
    color: #666;
    font-size: 26rpx;
    border-top: 1px solid #eee;
    padding-top: 10px;
  }

  .sn {
    .n {
      display: flex;
      align-items: center;
    }
  }

  .star_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8px;
  }

  .star_num {
    color: red;
    margin-left: 50rpx;
    font-size: 28rpx;
  }
}

.desc {
  color: #333;
  line-height: 55rpx;
  font-size: 32rpx;
}

.shouli {
  margin-top: 30rpx;
  background: #fff;
}

.view {
  position: relative;

  .status {
    position: absolute;
    right: 0rpx;
    top: 20rpx;
    width: 200rpx;
    //转90度
    transform: rotate(50deg);
    opacity: .4;
  }

  .type {
    margin-bottom: 15rpx;
    display: flex;

    view {
      background: rgba(23, 114, 246, 0.1);
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      color: rgb(9, 64, 142);
      font-size: 28rpx;
    }
  }

  .title {
    font-size: 44rpx;
    color: #000;

  }


  .info {
    margin-top: 30rpx;

    view {
      line-height: 35rpx;
      color: #999;
      font-size: 24rpx;
    }
  }

  .tfter {
    display: flex;
    justify-content: space-between;
    margin: 4rpx 0 12rpx 0;
    padding-bottom: 12rpx;
    border-bottom: 1px solid #eee;

    text, view {
      align-items: center;
      display: flex;
      color: #999;
      font-size: 24rpx;
    }
  }
}
</style>
